window.onload = function () {

    headercolor();
    timeback();
    banner();
}
//头部渐变
function headercolor() {
    var banner = document.querySelector('.jd_banner');
    var bannerHeight = banner.offsetHeight;
    var header = document.querySelector('.jd_header')
    window.onscroll = function () {

        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollHeight <= bannerHeight) {

            var opacity = scrollHeight / bannerHeight;
            // console.log(opacity);
            header.style.background = "rgb(233,35,34," + opacity + ")";
        }
    }
}
//掌上秒杀
function timeback() {
    var spans = document.querySelectorAll('.jd_sk_time>span');
    var time = 600;
    var timerId = setInterval(function () {
        if (time == 0) {
            clearInterval(timerId);
            return;
        }
        time--;
        // console.log(time);
        var hour = Math.floor(time / 60 / 60);
        var minute = Math.floor(time % 3600 / 60);
        var second = Math.floor(time % 60);

        spans[0].innerHTML = Math.floor(hour / 10);
        spans[1].innerHTML = hour % 10;

        spans[3].innerHTML = Math.floor(minute / 10);
        spans[4].innerHTML = minute % 10;

        spans[6].innerHTML = Math.floor(second / 10);
        spans[7].innerHTML = second % 10;

    }, 1000)

}

function banner() {
    var banner = document.querySelector('.jd_banner');
    var ulbox = document.querySelectorAll('.jd_banner>ul')[0];
    var bannerWidth = banner.offsetWidth;
    var lis = document.querySelectorAll('.jd_banner .bannerimg > li');
    var dians = document.querySelectorAll('.jd_bannercircle>li');


    // console.log(dians);

    //前后各clone一张图片
    ulbox.insertBefore(lis[lis.length - 1].cloneNode(true), ulbox.firstChild);
    ulbox.appendChild(lis[0].cloneNode(true));

    //重新获取图片的张数
    lis = document.querySelectorAll('.jd_banner .bannerimg > li');
    var count = lis.length;
    //重置ul和li 的宽度
    ulbox.style.width = bannerWidth * lis.length + 'px';
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.width = bannerWidth + 'px';
    }

    //让图片从第二张开始显示，如果用left，就要定位，如果是relative，父盒子的高度为0；所有用relative，不脱离文档流。
    ulbox.style.left = -bannerWidth + 'px';

    var index = 1;
    //屏幕发生变化时
    window.onresize = function () {
        // console.log(count,1111);
        bannerWidth = banner.offsetWidth;
        ulbox.style.width = bannerWidth * lis.length + 'px';
        // console.log(ulbox)
        console.log(ulbox.style.width);
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.width = bannerWidth + 'px';
        }
        ulbox.style.left = -bannerWidth * index + 'px';
    }

    //自动轮播
    var timerId = null;

    function interval() {
        timerId = setInterval(function () {
            index++;
            ulbox.style.transition = "all 0.5s linear";
            ulbox.style.left = -bannerWidth * index + 'px';
            //还没移动最后一张，下面的代码就执行了
            setTimeout(function () {
                if (index == count - 1) {
                    index = 1;
                    ulbox.style.transition = "none";
                    ulbox.style.left = -bannerWidth * index + 'px';
                }
            }, 1000)

        }, 2000)
    }
    interval();
    var isEnd = true;
    //触摸 :两个条件：1.在移动端2，元素有宽和高
    var startX, moveX, distanceX = 0;
    var left;
    ulbox.addEventListener('touchstart', function (e) {
        //清除浮动
        clearInterval(timerId);
        left = parseInt(this.style.left);
        //获取手指距离
        startX = e.targetTouches[0].clientX;
    })
    ulbox.addEventListener('touchmove', function (e) {
        if (isEnd) {
            moveX = e.targetTouches[0].clientX;
            distanceX = moveX - startX;
            // console.log(2);
            ulbox.style.transition = "none";
            this.style.left = left + distanceX + 'px';
        }
        // else{
        //     console.log(distanceX, 111);
        //     distanceX=0;
        // }
    })
    ulbox.addEventListener('touchend', function (e) {
        isEnd = false;
        // interval();
        // console.log(3);
        //排除只点击的情况
        //判断是上一张还是下一张
        if (Math.abs(distanceX) > 100) {
            if (distanceX > 0) {
                //上一张
                index--;
            } else {
                //下一张
                index++;
            }
            ulbox.style.transition = "all 0.1s linear";
            this.style.left = -index * bannerWidth + 'px';
        } else if (Math.abs(distanceX) > 0) {
            ulbox.style.transition = "all 0.1s linear";
            this.style.left = -index * bannerWidth + 'px';
        } else {
            // interval();
        }
        startX = 0;
        moveX = 0;
        distanceX = 0;

    });
    ulbox.addEventListener('webkitTransitionEnd', function () {
        // console.log(isEnd,"webkitTransitionEnd");
        //手滑动的无缝
        if (index == 0) {
            index = count - 2;
            ulbox.style.transition = "none";
            this.style.left = -index * bannerWidth + 'px';
        } else if (index == count - 1) {
            index = 1;
            ulbox.style.transition = "none";
            this.style.left = -index * bannerWidth + 'px';
        }
        setTimeout(function () {
            isEnd = true;
        }, 500)
        clearInterval(timerId);
        interval();

        for (var i = 0; i < dians.length; i++) {
            dians[i].classList.remove('current');
        }
        dians[index - 1].classList.add('current');
    })
    //动画没走完，事件还没出发，接着又点击，还没触发webkitTransitionEnd事件。
    // 所以用了节流阀

}